<template>
  <div class="row">
    <div class="col-8">
      <draggable
        v-model="rows"
        class="drag-box-one"
      >
        <div
          v-for="row in rows"
          :key="row.index"
          class="drag-container"
        >
          <draggable
            :list="row.items"
            :group="{ name: 'row' }"
            class="drag-box-two"
          >
            <div
              v-for="item in row.items"
              :key="item.title"
            >
              <div class="card">{{ item.title }}</div>
            </div>
          </draggable>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default {
  name: 'functional',
  display: 'Functional third party',
  order: 17,
  components: {
    draggable
  },
  data () {
    return {
      enabled: true,
      rows: [
        {
          index: 1,
          items: [
            {
              title: 'item 1'
            }
          ]
        },
        {
          index: 2,
          items: [
            {
              title: 'item 2'
            },
            {
              title: 'item 3'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.buttons {
  margin-top: 35px;
}

.drag-box-one {
  width: 1200px;
  height: 1000px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: grey;
  .drag-container{
    width: 500px;
    margin: 20px;
    background: red;
  }
  .drag-box-two{
    width: 300px;
    height: 200px;
    background: #c8ebfb;
    .card{
      width: 50px;
      height: 50px;
      background: #fff;
    }
  }
}
</style>
